/* 带标签的textarea输入框 */
<template>
	<view
		class="aha-textarea"
		@click="$emit('close')"
	>
		<!-- 点击容器时关闭表情输入，表情里会做阻止冒泡，因此只有点击非表情区域才会关闭 -->
		<view
			class="container"
			@click.native.stop="memeChange(false)"
		>
			<textarea
				class="textarea"
				auto-height
				focus
				fixed
				:maxlength="-1"
				:show-confirm-bar="false"
				:cursor-spacing="110"
				:disable-default-padding="true"
				:adjust-position="true"
				:placeholder="placeholder"
				v-model="inputContent"
			/>
			<!-- 表情和发送按键 -->
			<view class="footer u-flex u-row-between">
				<u-icon
					name="meme"
					custom-prefix="icon"
					size="40"
					:color="showMeme ? '#956134' : '#606266'"
					@click.native.stop="memeChange"
				/>
				<u-button
					size="mini"
					type='primary'
					@click="inputContent && $emit('send', inputContent)"
				>
					{{btnText}}
				</u-button>
			</view>
			<!-- 表情栏 -->
			<AhaMeme
				:show="showMeme"
				@input="inputContent+=$event"
			/>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    btnText: String,
    placeholder: String
  },
  data() {
    return {
      inputContent: '',
      showMeme: false
    }
  },
  methods: {
    /**
		 * 点击标签图标
		 */
    memeChange(type) {
      if (typeof type === 'boolean') {
        this.showMeme = type
      } else {
        this.showMeme = !this.showMeme
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.aha-textarea {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  z-index: 11;
  background-color: rgba(0, 0, 0, 0.1);
  border-top-left-radius: $radiusMiddle;
  border-top-right-radius: $radiusMiddle;

  .container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    background-color: #ffffff;

    .textarea {
      width: 100%;
      min-height: 100px;
      max-height: 200px;
      padding: 10px;
      background-color: $white1;
      border-radius: 8px;
    }

    .footer {
      padding: 5px;

      ::v-deep button {
        width: 100px;
      }
    }
  }
}
</style>
